<template>
  <div>
    <div>
      <div style="display: inline">{{ $t('common.user') }}：</div>
      <el-checkbox v-model="checkAll"  @change="chooseAll" :disabled="disdisabled">{{ $t('common.selectAll') }}</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox
        v-for="user in userAccountList"
        :key="user.id"
        :label="user.account"
        v-model="user.check"
        @change="changeCheck"
        style="width: 150px"
        :disabled="disdisabled"
      ></el-checkbox>
    </div>
  </div>
</template>

<script>
import userAccountOptions from "@/views/order/mixin/userAccountOptions";

export default {
  name: "UserCheckBox",
  mixins: [userAccountOptions],
  data(){
    return {
      checkAll: true,
      userIds: [],
    }
  },
  props: {
    disdisabled: {
      type: Boolean,
      default: false,
    },
  },
  methods:{
    chooseAll(){
      if(this.checkAll){
        this.userAccountList.forEach(item=>{
          item.check = true;
        })
      }else{
        this.userAccountList.forEach(item=>{
          item.check = false;
        })
      }
      this.emitAccount()
    },
    // 改变了选项
    changeCheck(){
      this.checkChooseAll()
      this.emitAccount();
    },
    // 判断是否全选
    checkChooseAll(){
      this.checkAll = this.userAccountList.every(item => item.check === true)
    },
    // 向父组件传值
    emitAccount(){
      this.userIds = [];
      this.userAccountList.forEach( item=> {
        if(item.check){
          this.userIds.push(item.id)
        }
      })
      this.$emit('input',this.userIds)
      this.$emit('change',this.userIds)
    }
  }
}
</script>

<style scoped>

</style>
